{extend name="$base" /}
{block name="resources"}
<style>
.map-button{
	line-height:26px;font-size:12px;margin-bottom: 0px;
	color: #333;
    vertical-align: middle;
    cursor: pointer;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
	border-radius: 2px;
}
.map-block{
	height:500px;
	margin-top:10px;
	border:1px solid #ddd; 
}

</style>
{/block}
{block name="main"}
<div class="set-style">
	<dl>
		<dt><span style="color:red;">*</span>&nbsp;&nbsp;门店名称：</dt>
		<dd>
			<p><input id="name" type="text" value="{$pickupPoint_detail['name']}" class="input-common"></p>
			<p class="error">门店名称不能为空</p>
		</dd>
	</dl>
	<dl>
		<dt><span style="color:red;">*</span>&nbsp;&nbsp;门店地址：</dt>
		<dd>
			<p>
				<select name="province" id="province" onchange="changeProvince();" value="{$store_info['province_id']}" class="select-common" style="width:150px!important;">
					<option value="">请选择省</option>
				</select>
				<select name="city" id="city" onchange="changeCity();" value="{$store_info['city_id']}" class="select-common" style="width:150px!important;">
					<option value="">请选择市</option>
				</select>
				<select name="district" id="district" value="{$store_info['district_id']}" class="select-common" style="width:150px!important;">
					<option value="-1">请选择区/县</option>
				</select>
			</p>
			<p class="error">请选择门店完整地址</p>
		</dd>
	</dl>
	<dl>
		<dt><span style="color:red;">*</span>&nbsp;&nbsp;详细地址：</dt>
		<dd>
			<p>
				
				<input id="address" class="input-common" value="{$pickupPoint_detail['address']}">
				<button onclick="mapChange();" class="map-button">搜索地图</button>
				<div id="container" class="map-block"></div> 
			</p>
			<p class="error">详细地址不能为空</p>
		</dd>
	</dl>
	<dl>
		<dt>门店联系人：</dt>
		<dd>
			<p><input id="contact" type="text" value="{$pickupPoint_detail['contact']}" class="input-common"></p>
		</dd>
	</dl>
	<dl>
		<dt><span style="color:red;">*</span>&nbsp;&nbsp;门店电话：</dt>
		<dd>
			<p><input id="phone" type="text" value="{$pickupPoint_detail['phone']}" class="input-common"></p>
			<p class="error">门店电话不能为空</p>
		</dd>
	</dl>
	<dl>
		<dt></dt>
		<dd>
			<button class="btn-common btn-big" onclick="updateReturnAjax();" >保存</button>
			<button class="btn-common-cancle btn-big" onclick="javascript:history.back(-1);" >返回</button>
		</dd>
	</dl>
</div>
<input type="hidden" id="provinceid" value="{$pickupPoint_detail['province_id']}">
<input type="hidden" id="cityid" value="{$pickupPoint_detail['city_id']}">
<input type="hidden" id="districtid" value="{$pickupPoint_detail['district_id']}">
<input type="hidden" id="pickip_id" value="{$pickip_id}"/>
<input type="hidden" id="longitude" value="{$pickupPoint_detail['longitude']}"/>
<input type="hidden" id="latitude" value="{$pickupPoint_detail['latitude']}"/>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=2UPBZ-QBK3J-G47FK-FZ4NU-7MPO2-3SFZU"></script>
<script type="text/javascript">
var map,geocoder;
 var is_map_change = true;
 var change_type = "map";
function init() {

    //div容器
    var container = document.getElementById("container");
    var map_width = $("#container").width();
	var map_height = $("#container").height();
    
    var latitude = "{$pickupPoint_detail['latitude']}";
    var longitude = "{$pickupPoint_detail['longitude']}";

    if(latitude == "" || longitude == "" || longitude == 0 || latitude == 0){

    	var center = new qq.maps.LatLng(39.916527,116.397128);
        map = new qq.maps.Map(document.getElementById('container'),{
            center: center,
            zoom: 13
        });
        //获取城市列表接口设置中心点
        citylocation = new qq.maps.CityService({
            complete : function(result){
                map.setCenter(result.detail.latLng);
            }
        });
        //调用searchLocalCity();方法    根据用户IP查询城市信息。
        citylocation.searchLocalCity();
    }else{
    	var center = new qq.maps.LatLng(latitude,longitude);
        //初始化地图
        var map = new qq.maps.Map(container, {
            // 地图的中心地理坐标
            center: center,
            zoom: 13
        });
    }

  //创建自定义控件
   
   var middleControl = document.createElement("div");
    middleControl.style.left = (map_width - 21.36)/2+"px";
    middleControl.style.top = (map_height - 30)/2+"px";
	middleControl.style.position = "relative";
	middleControl.style.width = "36px";
    middleControl.style.height = "36px";
	middleControl.style.zIndex = "100000";
   middleControl.innerHTML = '<img style="height:30px;"src="__TEMP__/{$style}/public/images/location/marker.png" />';
   document.getElementById("container").appendChild(middleControl);
   
 //地址和经纬度之间进行转换服务
   geocoder = new qq.maps.Geocoder();
   //设置服务请求成功的回调函数
   geocoder.setComplete(function(result) {
	   //change_type  为map  代表转化逆地址转化  为 select 代表 地址转换
	   // console.log(result);
	   if(change_type == "map"){
		   //alert("调用这里获取中心点的位置："+result.detail.address );
		   changeAreaSelect(result);
	   }else{
		   //alert("调用这里获取中心点的位置坐标："+result.detail.location );
		   map.panTo(result.detail.location);
	   }
	   
   });
   
   //若服务请求失败，则运行以下函数
   geocoder.setError(function() {
       alert("出错了，请输入正确的经纬度！！！");
   });
   
    //返回地图当前中心点地理坐标
    //centerDiv.innerHTML = "latlng:" + map.getCenter();
 	//当地图中心属性更改时触发事件
   qq.maps.event.addListener(map, 'center_changed', function() {
   	change_type = "map";
   	geocoder.getAddress(map.getCenter());
       //centerDiv.innerHTML = "latlng:" + map.getCenter();
   });
 	//窗口打开默认加载省	
   initSelect();
   
}
init();

function  initSelect(){
	var province_id = $("#provinceid").val();
	var city_id = $("#cityid").val();
	var district_id = $("#districtid").val();
	$.ajax({
		type : "post",
		url :"{:__URL('ADMIN_MAIN/order/getProvince')}",
		dataType : "json",
		success : function(data) {
			if (data != null && data.length > 0) {
				var str = "";
				for (var i = 0; i < data.length; i++) {
					str += '<option value="'+data[i].province_id+'">'+data[i].province_name+'</option>';
				}
				$("#province").append(str);
				$('.select-common').selectric();
			}
		   $("#province").val(province_id);
		   $.ajax({
				type : "post",
				url : "{:__URL('ADMIN_MAIN/order/getcity')}",
				dataType : "json",
				data : {
					"province_id" : province_id
				},
				async:false, 
				success : function(data) {
	
					if (data != null && data.length > 0) {
						var str = "<option value='-1'>请选择市</option>";
						for (var i = 0; i < data.length; i++) {
							if(city_id ==data[i].city_id){
								str += '<option value="'+data[i].city_id+'" selected="selected">'+data[i].city_name+'</option>';
							}else{
								str += '<option value="'+data[i].city_id+'">'+data[i].city_name+'</option>';
							}
						}
						$("#city").html(str);
						$("#district").html('<option value="0" selected="selected">请选择区</option>');
						$('.select-common').selectric();
						
						$("#city").val(city_id);
						$.ajax({
							type : "post",
							url : "{:__URL('ADMIN_MAIN/order/getdistrict')}",
							dataType : "json",
							data : {
								"city_id" : city_id
							},
							async:false, 
							success : function(data) {
								if (data != null && data.length > 0) {
									var str = "<option value='-1'>请选择区</option>";
									for (var i = 0; i < data.length; i++) {
										if(district_id == data[i].district_id){
											str += '<option value="'+data[i].district_id+'" selected="selected">'+data[i].district_name+'</option>';
										}else{
											str += '<option value="'+data[i].district_id+'">'+data[i].district_name+'</option>';
										}
									}
									$("#district").html(str);
									$('.select-common').selectric();
								   $("#district").val(district_id);
								   $('.select-common').selectric();
								}
						
							}
						});
						
					}

				}
			});
		 
		}
	});
}
//改变地图中心点
function mapChange(){
	var address = "";
	var province_name = $("#province").val() > 0 ? $("#province option:selected").text() : '';
	var city_name = $("#province").val() > 0 && $("#city").val() > 0 ? $("#city option:selected").text() : '';
	var district_name = $("#province").val() > 0 && $("#city").val() > 0 && $("#district").val() > 0 ? $("#district option:selected").text() : '';
	if(province_name != ""){
		address = province_name;
	}else{
		alert("必须填省市");
		return;
	}
	if(city_name != ""){
		address += ","+city_name;
	}else{
		alert("必须填省市");
		return;
	}
	if(district_name != ""){
		address += ","+district_name;
	}
	change_type = "select";
	geocoder.getLocation(address);
	
// 	map.panTo(new qq.maps.LatLng(39.9, 116.4));
}

//改变地理位置下拉框
function changeAreaSelect(area_obj){

	var address_obj = area_obj.detail.addressComponents;
	var lat = area_obj.detail.location.lat;
	var lng = area_obj.detail.location.lng;
	var province = address_obj.province;
	var city = address_obj.city;
	var district = address_obj.district;
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/order/getGeographicId')}",
		data : {
			"province" : province,
			"city" : city,
			"district" : district,
			"lat":lat,
			"lng":lng
		},
		success : function(data) {
			$("#province").val(data.province_id).change();
			$("#city").val(data.city_id).change();
			$("#district").val(data.district_id);
			$("#longitude").val(data.lng);
			$("#latitude").val(data.lat);
			$("#province_name").val(province);
			$("#city_name").val(city);
			$("#district_name").val(district);
			$('.select-common').selectric();
		}
	})
}

function getProvince(province_id){
	$.ajax({
		type : "post",
		url :"{:__URL('ADMIN_MAIN/order/getProvince')}",
		dataType : "json",
		success : function(data) {
			if (data != null && data.length > 0) {
				var str = "";
				for (var i = 0; i < data.length; i++) {
					str += '<option value="'+data[i].province_id+'">'+data[i].province_name+'</option>';
				}
				$("#province").append(str);
				$('.select-common').selectric();
			}
		}
	});
}

//选择省份弹出市区
function changeProvince(city_id) {
	var id = $("#province").find("option:selected").val();
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/order/getcity')}",
		dataType : "json",
		data : {
			"province_id" : id
		},
		async:false, 
		success : function(data) {
			if (data != null && data.length > 0) {
				var str = "<option value='-1'>请选择市</option>";
				for (var i = 0; i < data.length; i++) {
					if(city_id ==data[i].city_id){
						str += '<option value="'+data[i].city_id+'" selected="selected">'+data[i].city_name+'</option>';
					}else{
						str += '<option value="'+data[i].city_id+'">'+data[i].city_name+'</option>';
					}
				}
				$("#city").html(str);
				$("#district").html('<option value="0" selected="selected">请选择区</option>');
				$('.select-common').selectric();
			}

		}
	});
}

//选择市区弹出区域
function changeCity(district_id) {
	var id = $("#city").find("option:selected").val();
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/order/getdistrict')}",
		dataType : "json",
		data : {
			"city_id" : id
		},
		async:false, 
		success : function(data) {
			if (data != null && data.length > 0) {
				var str = "<option value='-1'>请选择区</option>";
				for (var i = 0; i < data.length; i++) {
					if(district_id == data[i].district_id){
						str += '<option value="'+data[i].district_id+'" selected="selected">'+data[i].district_name+'</option>';
					}else{
						str += '<option value="'+data[i].district_id+'">'+data[i].district_name+'</option>';
					}
				}
				$("#district").html(str);
				$('.select-common').selectric();
			}
	
		}
	});
}
</script>
<script>
//选择省份弹出市区
function updateReturnAjax() {
	var id = $("#pickip_id").val();
	var name = $("#name").val();
	var address = $("#address").val();
	var province = $("#province").val();
	var city = $("#city").val();
	var district = $("#district").val();
	var contact = $("#contact").val();
	var phone = $("#phone").val();
	var longitude=$("#longitude").val();
	var latitude=$("#latitude").val();

	if (name == '') {
		$("#name").parent().next().show();
		return false;
	}else{
		$(".error").hide();
	}
	if(address == ''){
		$("#address").parent().next().show();
		return false;
	}else{
		$(".error").hide();
	}
	if ($("#district").val() < 0 || $("#district").val() == "") {
		$(".address_error").show();
		return false;
	}else{
		$(".error").hide();
	}
	
	if(phone.length == 0){
		$("#phone").parent().next().show();
		return false;
	} else {
		$(".error").hide();
	}
	$.ajax({
		type : "post",
		url : "{:__URL('nspickup/ADMIN_MODULE/shop/updatepickuppoint')}",
		data : {
			'id' :id,
			'name' : name,
			'address' : address,
			'contact' : contact,
			'phone' : phone,
			'province_id' : province,
			'city_id' : city,
			'district_id' : district,
			'longitude':longitude,
			'latitude':latitude
		},
		success : function(data) {
			if (data['code'] > 0) {
				showTip(data["message"],'success');
				location.href = __URL("nspickup/ADMIN_MODULE/shop/pickuppointlist");
			} else {
				showTip(data["message"],'error');
			}
		}
	});
}
</script>
{/block}